<template>
	<div class="sample-editor">
		<div class="sample-editor-header">
			<div class="sample-editor-header-title">源代码编辑器</div>
			<div class="sample-editor-header-right">
				<div class="sample-editor-header-right-box" @click="play">
					<el-icon :size="12">
						<VideoPlay />
  				</el-icon>
					运行
				</div>
				<div class="sample-editor-header-right-box" @click="refresh">
					<el-icon :size="12">
						<Refresh />
  				</el-icon>
					重置
				</div>
				<div class="sample-editor-header-right-box" @click="onCopy">
					<el-icon :size="12">
						<CopyDocument />
  				</el-icon>
					复制
				</div>
			</div>
		</div>
		<Codemirror 
			ref="myCm" 
			v-model="content" 
			:extensions="extensions"
			@changes="onChanges" 
			class="sample-editor-code"
		/>
	</div>
</template>
 
<script setup>
	import { ref, reactive, computed, watch } from 'vue';
	import { ElMessage } from 'element-plus'
	import { copyText } from 'vue3-clipboard'
	import { Codemirror } from 'vue-codemirror';
	import { html } from "@codemirror/lang-html";
	import { javascript } from '@codemirror/lang-javascript'
	import { vue } from "@codemirror/lang-vue"
	import { oneDark } from "@codemirror/theme-one-dark";

	const	content = ref(null)
	const myCm = ref(null)
	const config = reactive({
    disabled: false,
    indentWithTab: true,
    tabSize: 4,
    autofocus: true,
		lineWrappingL: true,
		autoCloseBrackets:true,
    placeholder: 'input...',
    backgroundColor: 'red',
    language: 'html',
    theme: 'oneDark',
    phrases: 'en-us'
  })
	const themes = { oneDark }
  const languages = {
    html: html(),
		javascript: javascript(),
		vue: vue()
  }
	const extensions = computed(() => {
    const result = []
    result.push(languages[config.language])
    if (themes[config.theme]) {
      result.push(themes[config.theme])
    }
    return result
  })
	const props = defineProps({
			code: {
				type: String,
				required: true
			},
	})
	watch(
		() => props.code,
		(newValue, oldValue) => {
			content.value = newValue
		}
	)
	const emit = defineEmits(['codeChange'])
	const	onChanges = () => {
		content.value = myCm.value.content;
	}
	const	play = () => {
		// 调用父组件的方法
		emit('codeChange', content.value);
	}
	const	refresh = () => {
		content.value = props.code
		emit('codeChange', props.code);
	}
		// 复制成功时的回调函数
	const	onCopy = (e) => {
		copyText(content.value, undefined, (error) => {
			if (error) {
				ElMessage.warning(`复制失败: ${error} ！`);
			} else {
				ElMessage.success('内容已复制到剪切板！');
			}
		})
	}
</script>

<style lang="scss" scoped>
.sample-editor {
	height: 100%;
	background-color: #24272d;
	color: #ffff;
	.sample-editor-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 38px;
		padding: 0 1em;
		font-size: 14px;
		&-right {
			display: flex;
			justify-content: space-between;
			width: 35%;
			&-box {
				cursor: pointer;
				color: #45a3ff;
			}
		}
	}
	.sample-editor-code {
    display: block!important;
    height: calc(100vh - 38px);
    overflow-y: scroll;
		:deep(.cm-scroller) {
			&::-webkit-scrollbar {
				width: 8px;
				height: 8px;
				background-color: inherit;
			}
			&::-webkit-scrollbar-thumb {
        border-radius: 6px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
        background-color: #b1b1b18f;
      }
		}
		&::-webkit-scrollbar {
			width: 8px;
			height: 8px;
			background-color: inherit;
		}
		/*定义滑块 内阴影+圆角*/
		&::-webkit-scrollbar-thumb {
			border-radius: 6px;
			-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
			background-color: #b1b1b18f;
		}
	}
}
</style>